import React from 'react';

export default function Footer({
  list,
  type,
  handleSetType,
  handleClearDone,
  filterArr,
}) {
  // 原理：💥 模拟计算属性原理：setState会导致组件重新渲染，声明的变量会被重新计算
  const leftCount = list.filter((item) => !item.done).length;
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{leftCount}</strong> 剩余
      </span>
      <ul className="filters">
        {filterArr.map((item) => {
          return (
            <li key={item}>
              <a
                className={type === item ? 'selected' : ''}
                onClick={() => handleSetType(item)}
                href="#/"
              >
                {item}
              </a>
            </li>
          );
        })}
      </ul>
      <button className="clear-completed" onClick={handleClearDone}>
        清除已完成
      </button>
    </footer>
  );
}
